<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #carousel{
            width: 500px;   /*与图片等大小，根据自己的图设置*/
            height: 250px;
            position: relative; /*相对自身定位 */
            overflow: hidden;
        }
        #imgList{
            width: 3500px;  /*所有图片总共的宽度*/
            height: 250px;  
            position: absolute;
            left: -500px;
        }
        #imgList li{
            float: left;
        }
        #imgList li img{
            width: 500px;  /*图片宽高，自己设置*/
            height: 250px;
        }
        /* 序号列表 */
        #orderList{
            position: absolute;
            bottom: 10px;
            right: 24px;
        }
        #orderList li{
            width: 16px;
            height: 16px;
            margin: 0 4px;
            text-align: center;
            float: left;
            line-height: 16px;
            border-radius: 50%;
            background-color: gray;
            opacity: .7;
        }
        #orderList li.on{
            background-color: aqua;
        }
        /* 按钮 */
        .btn{
            position: absolute;
            width: 30px;
            height: 30px;
            line-height: 30px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            color: aqua;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            display: none;
        }
        .btn.left{
            left: 20px;
        }
        .btn.right{
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <ul id="imgList">
            <li><img src="./image/5.jpg" alt=""></li>
            <li><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.jpg" alt=""></li>
            <li><img src="./image/3.jpg" alt=""></li>
            <li><img src="./image/4.jpg" alt=""></li>
            <li><img src="./image/5.jpg" alt=""></li>
            <li><img src="./image/1.jpg" alt=""></li>
        </ul>
        <ul id="orderList">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="javascript:void(0);" class="btn left">&lt;</a>
        <a href="javascript:void(0);" class="btn right">&gt;</a>
    </div>
</body>
<script src="./common.js"></script>
</html>